<template>
<div class="record-main">
  <div class="block-header">
    <span class="hd">患者</span>
    <span class="div_">/</span>
    <span class="hd2">填写病历</span>
  </div>
  <div style="width: 99%;margin-left: 1%;">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title" style="font-weight: 600;">
          <svg class="icon" aria-hidden="true" style="width: 30px;line-height: 30px;height: 30px;">
            <use xlink:href="#icon-gerenxinxi"></use>
          </svg>
          &nbsp;患者信息
        </h4>
      </div>
      <div class="card-body">
        <form>
          <div class="row">
            <div class="col-xl-6">
              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_name">姓名<span class="text-danger">*</span> </label>
                <div class="col-lg-6">
                  <input type="text" class="form-control" id="patient_name" name="patient_name" required value="" v-model:value="patient.name" />
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_gender">性别<span class="text-danger">*</span> </label>
                <label class="col-lg-2  col-form-label ">
                  <input type="radio" class="ratio-type" id="patient_gender" name="patient_gender"  value="男" checked v-model:checked="patient.gender"/> 男
                </label>
                <label class="col-lg-2 col-form-label ">
                  <input type="radio" name="patient_gender"  value="女" v-model:checked="patient.gender"/> 女
                </label>
              </div>
              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_age">年龄<span class="text-danger">*</span> </label>
                <div class="col-lg-6">
                  <input type="number" class="form-control" id="patient_age" name="patient_age" required value="" v-model:value="patient.age"/>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_ID">身份证号<span class="text-danger">*</span> </label>
                <div class="col-lg-6">
                  <input type="text" class="form-control" id="patient_ID" name="patient_ID" required value="" v-model:value="patient.card"/>
                </div>
              </div>



            </div>
            <div class="col-xl-6 ">
              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_job">民族</label>
                <div class="col-lg-6">
                  <input type="text" class="form-control" id="patient_job" name="patient_job" required value="" v-model:value="patient.nation"/>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_job">职业</label>
                <div class="col-lg-6">
                  <input type="text" class="form-control" name="patient_job" required value="" v-model:value="patient.work"/>
                </div>
              </div>
              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_address">家庭住址</label>
                <div class="col-lg-6">
                  <input type="text" class="form-control" id="patient_address" name="patient_address" required value="" v-model:value="patient.address"/>
                </div>
              </div>

              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_phone">联系方式<span class="text-danger">*</span> </label>
                <div class="col-lg-6">
                  <input type="text" class="form-control" id="patient_phone" name="patient_phone" required value="" v-model:value="patient.phone"/>
                </div>
              </div>
            </div>


          </div>

        </form>
      </div>
      <div class="card-header">
        <h4 class="card-title" style="font-weight: 600;">
<!--          <svg style="width: 30px;height: auto" t="1650384753493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15551" width="200" height="200"><path d="M451.725339 451.168661c6.645337-1.211592 12.788232-0.082888 14.824607 7.208155 6.911396 24.751681-15.053827 59.295359-35.410417 57.222145-58.909573 149.52111-172.198553 149.52418-231.10915-0.004094-20.083367 2.014886-42.318743-32.463301-35.407347-57.218051 1.999536-7.271599 8.17927-8.416677 14.786745-7.223504-5.917768-26.019555-8.988704-58.204517-3.345181-84.344822 24.159188-111.841004 223.547955-131.226478 234.645689-59.693424 53.842171 17.979454 56.606116 76.330303 41.015054 144.053595zM287.398041 782.628133c-30.02886-46.18888-47.771931-92.35934-57.334708-126.58784-8.715481 3.374857-19.04676 6.465236-30.223288 9.544357-28.340409 61.617236-22.273238 149.201839 1.304713 209.728233 18.781724-1.414206 34.716617 13.396075 34.716616 32.16245 0 17.821865-14.437798 32.263757-32.259663 32.263756-28.490834 0-42.77923-34.297062-23.229004-54.611696-24.425247-61.741056-31.299804-146.658928-8.336859-212.083879-43.125107 11.663621-89.631211 26.365432-105.108686 57.665236-23.924851 48.195579-42.589919 187.297406-46.467219 272.849726h590.295048c-3.885486-85.55232-22.584323-224.654147-46.510197-272.849726-14.514546-29.364736-56.335964-44.117712-97.04198-55.458992 3.457745 22.569996 1.455139 46.75886-4.071727 70.944654 28.959508 11.817116 46.88882 40.889187 41.091801 77.754743-7.872279 50.066179 2.996235 140.332862-61.216101 125.89711-14.745813-3.322669-9.713203-25.730983 5.03261-22.415478 14.517616 3.256154 20.967502-6.607475 24.384315-21.920198 4.916976-21.808658 4.995771-58.888084 9.10229-85.072391 9.642595-61.231451-72.234017-79.754279-89.747867-20.210257-7.369837 25.103697-23.230028 58.722309-28.187936 80.819539-3.453652 15.300444-1.841947 26.975321 12.634736 30.242731 14.787768 3.307319 9.717296 25.72382-5.028517 22.415477-64.134564-14.424495-15.863261-91.023928-1.463325-139.958332 10.602454-36.100124 39.671455-54.604533 70.97126-52.677651 5.684455-24.796706 7.48854-49.866635 1.728361-72.492913-15.433473-4.124939-29.800664-8.074893-41.322045-12.537523-8.449422 30.99179-28.265707 80.042851-57.875013 126.554072l-10.556406-58.991438 7.872279-19.010945-25.232634-21.218211-25.268449 21.218211 7.909117 19.010945-10.561522 59.02623zM630.571276 399.823352l-22.584323 71.195363 92.625399-54.038645c8.723668-5.085822 17.628461-7.036239 27.654794-6.068194a268.793349 268.793349 0 0 0 43.240741 0.670264c54.455131-3.528353 103.150082-23.499157 139.173458-53.974177 38.403582-32.514466 62.136051-77.065036 62.136051-125.949299 0-48.889379-23.731447-93.441995-62.136051-125.958508-39.818811-33.692289-95.167286-54.544158-156.649447-54.544158-61.473974-0.004093-116.822449 20.854939-156.64126 54.544158-38.403582 32.511396-62.136051 77.072199-62.136051 125.958508 0 48.884263 23.731447 93.438926 62.136051 125.949299a215.318543 215.318543 0 0 0 24.189887 17.672462c8.339929 5.254667 11.948099 15.147971 8.983587 24.544974l0.007164-0.002047z m-63.904322 99.877555l32.491954-102.446048c-57.640676-38.689083-94.629028-98.482792-94.629028-165.594148 0.004093-116.653604 111.715138-211.21714 249.502018-211.217141 137.794044 0 249.508158 94.563537 249.508159 211.217141 0 116.648487-111.714114 211.208954-249.508159 211.208954-11.400632 0-22.659024-0.648775-33.676939-1.908463l-131.336995 76.614782c-7.335044 4.244666-16.710557 1.747803-20.971596-5.577007a15.462126 15.462126 0 0 1-1.379414-12.29807z" fill="#1296db" p-id="15552"></path></svg>-->
          <svg class="icon" aria-hidden="true" style="width: 26px;line-height: 30px;height: 30px;">
            <use xlink:href="#icon-jibenxinxi"></use>
          </svg>
          &nbsp;我的医嘱</h4>
      </div>
      <div class="card-body">
        <form>
          <div class="row">
            <div class="col-xl-6">
              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_outpatient">就诊号<span class="text-danger">*</span> </label>
                <div class="col-lg-6">
                  <input type="text" class="form-control" id="patient_outpatient" name="patient_outpatient" required value="" v-model:value="record.outpatient"/>
                </div>
              </div>
            </div>
            <div class="col-xl-6">
              <div class="mb-3 row">
                <label class="col-lg-3 col-form-label" for="patient_clinic">就诊科室<span class="text-danger">*</span> </label>
                <div class="col-lg-6">
                  <input type="text" class="form-control" id="patient_clinic" name="patient_clinic" required value="" v-model:value="record.clinic" />
                </div>
              </div>
            </div>

            <div class="col-xl-6" >
              <div class="row" >
                <label class="col-lg-3 col-form-label" for="patient_name" >主诉</label>
              </div>
            </div>
            <div class="mb-3 col-xl-11">
              <textarea rows="3" class="form-control" name="patient_name" required value="" v-model:value="record.chief_complaint" />
            </div>

            <div class="col-xl-4" >
              <div class="row" >
                <label class="col-lg-5 col-form-label" for="patient_name" >既往病史</label>
              </div>
            </div>
            <div class="mb-3 col-xl-11">
              <textarea rows="4" class="form-control" name="patient_name" required value="" v-model:value="record.medical_history" />
            </div>

            <div class="col-xl-4" >
              <div class=" row" >
                <label class="col-lg-5 col-form-label" for="patient_name" >诊断结果</label>
              </div>
            </div>
            <div class="mb-3 col-xl-11">
              <textarea rows="1" class="form-control" name="patient_name" required value="" v-model:value="record.diagnosis_result" />
            </div>

            <div class="col-xl-6" >
              <div class="row" >
                <label class="col-lg-3 col-form-label" for="patient_name" >医嘱</label>
              </div>
            </div>
            <div class="mb-3 col-xl-11">
              <textarea rows="6" class="form-control" name="patient_name" required value="" v-model:value="record.proposals" />
            </div>



          </div>


        </form>

      </div>
      <div class="col-xl-11">
<!--        <button type="submit" class="btn me-lg-4 btn-primary" @click="submit">提交</button>-->
<!--        <button type="submit" class="btn btn-light" style="background-color:#ccc">取消</button>-->
        <span class="begin" @click="submit">提交</span>
        <span class="begin2" >取消</span>
      </div>

    </div>
  </div>

</div>
</template>

<script>
import {request} from "../api/request";

export default {
  name: "MedicalRecord",
  data() {
    return {
      patient: {

      },
      //病历
      record: {
        outpatient:'1722022169',// 门诊号
        clinic:'心脏内科',//科室
        chief_complaint:'胸闷气短，呼吸不畅',//主诉
        medical_history:'高血压、高血脂、2型糖尿病',//既往病史
        proposals:'多注意休息，不能熬夜，按照医嘱坚持服药',//医嘱
        diagnosis_result:'冠心病'//诊断结果
      }

    }
  },
  methods:{
    submit() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      });
      setTimeout(_=>{
        window.location.reload();
      }, 400);

    }
  },
  mounted() {
    let that = this;
    request({
      url: 'patient/' + that.$route.params.id + '/',
      method: 'get'
    }).then(function (data) {
      data = data.data;
      that.patient = data.info;

    }).catch(function (err) {
      that.$message.error('获取病例信息失败');
      setTimeout(_=>{
        that.$router.push('/index/patientlist');
      }, 300);
    })
  }
}
</script>

<style scoped>
/*清除浮动*/
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}
*, ::after, ::before {
  box-sizing: border-box;
  outline: none;
}
div {
  display: block;
}
.record-main {
  width: 100%;
  height: 100%;
}
/deep/ input {
  background:none;
  outline:none;
  border:none;
}
/deep/ input:focus {
  border: none;
  outline: none;
}
input {
  border: 1px solid #F2F2F2;
  border-radius: 8px;
  transition: .3s;
  color: #969ba0;
}

textarea {
  border: 1px solid #F2F2F2;
  border-radius: 8px;
  transition: .3s;
  color: #969ba0;
}

textarea:focus {
  border-radius: 8px;
  /*border: 1px solid #1362FC!important;*/
  outline: none;
  box-shadow:0px 0px 10px 0px rgba(127,127,127,0);
  border: 1px solid #1362FC!important;
  color: #969ba0;
}

/deep/ input:focus {
  /*border-color: #1362FC!important;*/
  border-radius: 8px;
  /*border: 1px solid #1362FC!important;*/
  outline: none;
  box-shadow:0px 0px 10px 0px rgba(127,127,127,0);
  border: 1px solid #1362FC!important;
  color: #969ba0;
}
/*.form-control {*/
/*  display: block;*/
/*  width: 100%;*/
/*  line-height: 1.5;*/
/*  font-size: 0.875rem;*/
/*  font-width: 400;*/
/*  appearance: none;*/
/*  transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;*/
/*}*/
.block-header {
  background-color: #fff;
  height: 64px;
  color: #2c2c2c;
  padding: 15px;
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  min-width: 0;
  margin-bottom: 20px;
  width: 99%;
  margin: 0 auto;
  margin-bottom: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(82 63 105 / 8%);
  margin-left: 10px;
  /*background-color: lightcoral;*/
  line-height: 64px;
  overflow: hidden;
  padding-top: 0;
}
.hd, .hd2 {
  display: inline-block;
  width: 42px;
  height: 64px;
  line-height: 64px;
  margin-left: 16px;
  font-weight: 600;
  /*color: #627EEA;*/
  color: #1362FC;
  letter-spacing: 1px;
  overflow: hidden;
  /*background-color: lightgoldenrodyellow;*/
}
.div_ {
  overflow: hidden;
  display: inline-block;
  padding: 0;
  font-size: 30px;
  height: 60px;
  line-height: 60px;
  color: #1362FC;
  font-weight: 300;
  /*margin-top: 5px;*/
}
.hd2 {
  margin-left: 10px;
  width: 180px;
  color: #828690;
  font-weight: 500;
}

div .card {
  background: #fff;
  transition: .5s;
  border: 0;
  /*text-align: left;*/
  /*border-radius: 0.1875rem;*/
  position: relative;
  width: 100%;
  margin-bottom: 30px;
  display: inline-block;
  word-wrap: break-word;
  flex-direction: column;
  border-radius: 20px;
  box-shadow: 0 0 10px rgb(82 63 105 / 8%);
}
.card-header {
  position: relative;
  background: transparent;
  /*padding: 1.5rem 1.875rem 1.25rem;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  padding-bottom: 0;
}
.card-body {
  padding: 1.875rem;
  flex: 1 1 auto;

}
.card-body form {
  text-align: left;
}
.card-title {
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: capitalize;
}
h4 .card-title {
  line-height: 1.25rem;
}
.row {
  display: flex;
  flex-wrap: wrap;
}
.begin, .begin2 {
  position: relative;
  display: inline-block;
  z-index: 2;
  width: 80px;
  height: 48px;
  line-height: 48px;
  background-color: #1362FC;
  margin: 0 auto;
  margin-top: 3%;
  color: white;
  border-radius: 12px;
  font-size: 14px;
  letter-spacing: 1px;
  transition: .3s;
  margin-left: 20px;
  margin-right: 20px;
}
.begin:hover {
  background-color: #034BD9;
  box-shadow: 0 0 10px rgb(82 63 105 / 8%);
}
.begin2 {
  background-color: rgba(173,173,176,0.62);
}
.begin2:hover {
  background-color: rgba(173, 173, 176, 0.71);
}
/deep/ .ratio-type {
  background-color: #1362FC;
  border: 1px solid #1362FC;
}
</style>